<template>
    <div>
        <h2 align="center">食谱列表</h2>
        食谱标题:<input type="text"  v-model="info.name">
        食谱类型:<select v-model="info.typeid">
                            <option value="">请选择</option>
                            <option v-for="i in typelist" :value="i.typeId">{{ i.typeName }}</option>
                        </select>
        <input type="button" value="查询" class="btn btn-info" @click="show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>食谱编号</td>
                    <td>食谱标题</td>
                    <td>食谱图片</td>
                    <td>食谱类型</td>
                </tr>
                 <tr v-for="i in data" :key="i.foodId">
                    <td>{{ i.foodId }}</td>
                    <td>{{ i.title }}</td>
                    <td><img :src="i.img" width="50" height="50" ></td>
                    <td>{{ i.typeName }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref,reactive,onMounted } from "vue";

let data:any=ref({})

let info:any=reactive({
    name:'',
    typeid:""
})

let typelist:any=ref([])

onMounted(()=>{
    gettype();
    show();
})

const gettype=()=>{
    
    axios({
        url:"https://localhost:7210/api/Shop/BindType",
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        typelist.value=res.data;
    })
    .catch((err)=>{
         console.log(err);
    })
}
const show=()=>{
   
    axios({
        url:"https://localhost:7210/api/Shop/ShowFood",
        method:'get',
        params:info 
    })
    .then((res)=>{
        console.log(res);
        data.value=res.data;
    })
    .catch((err)=>{
         console.log(err);
    })
}


</script>

<style scoped>

</style>